import React, { Component } from 'react';
import { withRouter } from "react-router-dom"
import myaxios from "../../untils/myaxios"
import { NavBar, Icon, SearchBar } from 'antd-mobile';
import "./Search.scss"
class Search extends Component {
    state = {
        value: ' ',
        productList:[],
    };
    // 返回上一页
    handleForward(){
        window.history.go(-1)
    }
    onChange = (value) => {
        this.setState({ value });
    };
    clear = () => {
        this.setState({ value: '' });
    };
    // 搜索事件
    SearchList=() => {
        myaxios.get("goods/qsearch",{
            params:{
                query:this.state.value
            }
        }).then(res=>{
           this.setState({
            productList:res
           })
        })
    }
    // 点击商品列表
    handleClickItem=(e) => {
        // 获取点击的项
        let goods_id=e.target.getAttribute("datatype")
        if(goods_id){
            this.props.history.push("/goodDetail/"+ goods_id)
        }
    }
    render() {
        return (
            <div className="wx-search-center">
                {/* 搜索中心头部开始 */}
                <div className="wx-search-head">
                    <NavBar className="search-nav-head" icon={<Icon onClick={this.handleForward} type="left" />}>搜索中心</NavBar>
                </div>
                {/* 搜索中心头部结束 */}
                {/* 搜索中心搜索按钮开始 */}
                <div className="wx-search-box">
                    <SearchBar
                        className="search-box-input"
                        value={this.state.value}
                        placeholder="搜索"
                        onCancel={this.SearchList}
                        showCancelButton
                        onChange={this.onChange}
                        cancelText="搜索"
                    />
                </div>
                {/* 搜索中心搜索按钮结束 */}
                {/* 商品列表开始 */}
                <div className="wx-search-list" onClick={this.handleClickItem}>
                    {this.state.productList.map(v=>{
                        return <div className="search-list-item" key={v.goods_id} >
                            <img src="../logo192.png" alt=""/>
                            <div className="list-item-name" datatype={v.goods_id}>
                                {v.goods_name}
                            </div>
                        </div>
                    })}
                </div>
                {/* 商品列表结束*/}
            </div>
        );
    }
}

export default withRouter(Search);
